<template>
  <div class="in-block">
    <div class="title">基本信息</div>
    <HkForm
      ref="hkFormRef"
      :form-labels="formLabels"
      :rules="rules"
      :data="ruleForm"
      :dict-list="dictList"
      :btn-hidden="true"
      label-width="120"
      label-position="left"
      @handleEvent="handleEvent"
    />
  </div>
</template>

<script>
import HkForm from '@/components/Hk-Form/index.vue'
import SelectDialog from '../../components/productSelector'
import { getDictList, loglist, productTypeComTree } from '@/api/milkyway/accessRules'
import logicalJudg from '@/components/Common/logicalJudg'

export default {
  components: { HkForm, SelectDialog, logicalJudg },
  props: {
    step1Data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formLabels: [
        {
          field: 'name',
          type: 'input',
          label: '规则名称',
          maxlength: 50,
          span: 12
        },
        {
          field: 'importProduct',
          type: 'cascader',
          label: '接入产品',
          list: 'importProductList',
          props: {
            value: 'id',
            label: 'name'
          },
          span: 12
        }
      ],
      dictList: {
        importProductList: []
      },
      importProduct: [],
      rules: {
        name: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
        importProduct: [{ required: true, message: '请选择接入产品', trigger: 'change' }],
        productId: [{ required: true, message: '请选择接入产品', trigger: 'blur' }],
        type: [{ required: true, message: '请选择解析规则类型', trigger: 'blur' }],
        save: [{ required: true, message: '请选择存储策略', trigger: 'blur' }],
        context: [{ required: true, message: '请输入原始日志', trigger: 'blur' }]
        /* ruleContext: [
           { required: true, message: '请输入GROK表达式', trigger: 'blur' }
         ]*/
      },
      //  逻辑判断
      searchFormObj: {
        fieldList: [
          // 第一个下拉框
          {
            type: 'select',
            field: 'contextValue',
            list: 'contextList'
          },
          // 第二个下拉框
          {
            type: 'select',
            field: 'operators',
            list: 'operatorsList'
          },
          // 第三个下拉框
          {
            type: 'input',
            field: 'matchValue',
            hidden: false
          }
        ],
        searchData: {},
        listTypeInfo: {
          contextList: [],
          operatorsList: []
        }
      },
      contextList: [],
      relationData: {
        flag: 'and',
        subSyntaxExpressnList: []
      },
      tableData: []
    }
  },
  computed: {
    ruleForm: {
      get() {
        return this.step1Data
      }
    }
  },

  created() {
    this.getDictList()
    this.getTreeSelect()
  },
  methods: {
    trigger() {
      this.submitForm('ruleForm')
    },
    //   获取接入产品的下拉框
    getTreeSelect() {
      productTypeComTree().then(res => {
        const resVal = res[0].children
        if (resVal.length > 0) {
          resVal.forEach((item) => {
            item.children.forEach((i) => {
              if (i.children.length > 0) {
                i.children.forEach(j => {
                  delete j.children
                })
              }
            })
          })
        }
        this.dictList.importProductList = resVal
      })
    },
    /** 获取字典数据 */
    getDictList() {
      getDictList('ruleExpression').then((res) => {
        const lists = res.map((i) => {
          return { label: i.itemLabel, value: i.itemVale }
        })
        this.searchFormObj.listTypeInfo.operatorsList = lists
      })
    },
    /** 必填项校验 */
    handleSubmit() {
      return new Promise(async(resolve) => {
        const res = await this.$refs.hkFormRef.handleFormSubmit('formLabels')
        resolve(res)
      })
    },
    // 改变表单
    handleEvent(obj) {
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-textarea {
  max-width: auto !important;
}
::v-deep .el-form-item {
    margin:0 !important;
  }
.app-container {
  height: 100%;
  position: relative;

}
</style>
